<template>
  <div class="login-ground">
    <div class="login-erea">
      <p class="gene-title">KNA 基因库</p>
      <div class="item-input">
        <span >用 名：</span>
        <el-input 
          style="float:left; width:280px"
          clearable
          v-model="username"
          maxlength=15
          placeholder="用户名">
          <i slot="prefix" class="el-input__icon el-icon-user"></i>
        </el-input>
      </div>
      <div class="item-input">
        <span style="float:left;line-height:34px;text-align: center;">密 码：</span>
        <el-input 
          style="float:left; width:280px" 
          type="password" 
          clearable 
          :show-password="true" 
          v-model="password" 
          placeholder="密码">
          <i slot="prefix" class="el-input__icon el-icon-lock"></i>
        </el-input>
      </div>
      <div class="item-input">
        <span style="float:left;line-height:34px;text-align: center;">MFA ：</span>
        <el-input style="float:left; width:280px" 
          clearable 
          v-model="mfacode" 
          placeholder="双因子验证">
          <i slot="prefix" class="el-input__icon el-icon-postcard"></i>
        </el-input>
      </div>
      <div class="button-input">
        <el-button style="width:320px" type="success" @click="userLogining" >登录</el-button>
      </div>
    </div>
  <el-dialog 
    class="qrcode-dialog" 
    width="400px" 
    :modal="true" 
    :show-close="false" 
    title="双子因子认证"
    :visible.sync="qrcode_visible">
    <span class="text-title">请打开 Google Authenticator 扫码开启双因子认证，绑定完成后请点击确认按钮</span>
    <div class="qrcode-preview">
      <img :src="image_url"/>
    </div>
    <div class="qrcode-preview" style="margin:30px 0px 10px 0px">
      <el-button style="width:320px" type="success" @click="qrcodeBind" >绑定</el-button>
    </div>
  </el-dialog>
  </div>

</template>

<script>
import { mapActions } from 'vuex'
import { success, error, warning } from '@/utils/toast'
import { encryptMd5 } from '@/utils/encrypt'
export default {
  name: 'attribute',
  data () {
    return {
      username:'',
      password:'',
      mfacode:'',
      image_url:'',
      qrcode_visible:false,
    }
  },
  methods: {
    ...mapActions([
      'resetRoutes',
      'userLogin',
    ]),
    async userLogining() {
      if (this.username === "" || this.password === "") {
        warning("请输入用户名/密码")
        return
      }

      const resp = await this.userLogin({
        username: this.username,
        password: encryptMd5(this.password),
        mfacode: +this.mfacode,
      })
      
      if (!resp || 0 !== resp.error_code || !resp.data) {
        if (resp.error_code === 2) {
          this.qrcode_visible = true
          // this.image_url = `http://10.228.19.128:8019/gene/qrcode?username=${this.username}`
          this.image_url = `http://10.226.22.57:8080/gene/qrcode?username=${this.username}`
        } else {
          warning(resp.msg)
        }
        return
      }

      this.$router.push("/")
    },
    async qrcodeBind() {
      const resp = await QrcodeBindService({
        username: this.username
      })

      console.log("getQrcode", resp)
      if (!resp || 0 !== resp.error_code ) {
        error("绑定失败请联系管理员！")
        return
      }

      this.qrcode_visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .login-ground {
    background-color: green;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: linear-gradient(to bottom right,#cde0cc, #6065a7);
    overflow: hidden;

    .login-erea {
      background-color:rgb(253, 253, 253);
      width: 400px;
      box-sizing:border-box;
      margin:0 auto;
      border-radius: 10px;
      background: linear-gradient(to bottom right,#d4d8d4, #d1d4f1);
      box-shadow: 10px 10px 5px #888888;

      .gene-title {
        font-size:30px;
        color:black;
        font-weight:800;
        padding-top:35px;
        margin-bottom: 40px;
        margin-top:50%;
      }

      .item-input {
        width:100%;
        height:34px;
        margin:10px 30px;

        span {
          float:left;
          line-height:34px;
          text-align: center;
          font-weight: 600;
          font-size:14px;
        }
      }

      .button-input {
        padding:30px 10px;
      }
    }
  }

  .qrcode-dialog {
    text-align:left;
    .text-title {
      margin-bottom:30px;
      display:block;
    }

    .qrcode-preview {
      width:100%; 
      text-align:center;

      img {
        max-width:320px;
        max-height:320px;
        margin: 0 auto
      }
    }
  }
</style>
